
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>XBMAB |  CMDB Manager</title>
    {% block base-header %}

	<!--STYLESHEET-->
	<!--=================================================-->

	<!--Bootstrap Stylesheet [ REQUIRED ]-->
	<link href="/static/css/bootstrap.min.css" rel="stylesheet">
	<link rel="icon" href="/static/img/icon2.png" mce_href="/static/img/icon.png" type="image/x-icon">

	<!--Nifty Stylesheet [ REQUIRED ]-->
	<link href="/static/css/nifty.min.css" rel="stylesheet">


	<!--Font Awesome [ OPTIONAL ]-->
	<link href="/static/css/font-awesome.min.css" rel="stylesheet">


	<link href="/static/css/themes/type-c/theme-light.min.css" rel="stylesheet">
	<link href="/static/css/custom.css" rel="stylesheet">
	<link href="/static/plugins/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">

	<!--SCRIPT-->
	<!--=================================================-->

	<!--Page Load Progress Bar [ OPTIONAL ]-->
	<link href="/static/css/pace.min.css" rel="stylesheet">
	<script src="/static/js/pace.min.js"></script>


    {% endblock %}
    {% block header-css %}

    {% endblock %}
		

</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
	<div id="container" class="effect mainnav-lg">
		{% block page-container %}
		<!--NAVBAR-->
		<!--===================================================-->
		<header id="navbar">
			<div id="navbar-container" class="boxed">

				<!--Brand logo & name-->
				<!--================================-->
				<div class="navbar-header">
					<a href="/" class="navbar-brand">
							<span class="brand-text logo-text" >XBMAN-CMDB</span>
					</a>

				</div>
				<!--================================-->
				<!--End brand logo & name-->


				<!--Navbar Dropdown-->
				<!--================================-->
				<div class="navbar-content clearfix">
					<ul class="nav navbar-top-links pull-left">

						<!--Navigation toogle button-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li class="tgl-menu-btn">
							<a class="mainnav-toggle" href="#">
								<i class="fa fa-navicon fa-lg"></i>
							</a>
						</li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End Navigation toogle button-->


						<!--Messages Dropdown-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--<li class="dropdown">-->
							<!--<a href="#" data-toggle="dropdown" class="dropdown-toggle">-->
								<!--<i class="fa fa-envelope fa-lg"></i>-->
								<!--<span class="badge badge-header badge-warning">9</span>-->
							<!--</a>-->

							<!--&lt;!&ndash;Message dropdown menu&ndash;&gt;-->
							<!--<div class="dropdown-menu dropdown-menu-md with-arrow">-->
								<!--<div class="pad-all bord-btm">-->
									<!--<p class="text-lg text-muted text-thin mar-no">You have 3 messages.</p>-->
								<!--</div>-->
								<!--<div class="nano scrollable">-->
									<!--<div class="nano-content">-->
										<!--<ul class="head-list">-->

											<!--&lt;!&ndash; Dropdown list&ndash;&gt;-->
											<!--<li>-->
												<!--<a href="#" class="media">-->
													<!--<div class="media-left">-->
														<!--<img src="/static/img/av2.png" alt="Profile Picture" class="img-circle img-sm">-->
													<!--</div>-->
													<!--<div class="media-body">-->
														<!--<div class="text-nowrap">Andy sent you a message</div>-->
														<!--<small class="text-muted">15 minutes ago</small>-->
													<!--</div>-->
												<!--</a>-->
											<!--</li>-->

											<!--&lt;!&ndash; Dropdown list&ndash;&gt;-->
											<!--<li>-->
												<!--<a href="#" class="media">-->
													<!--<div class="media-left">-->
														<!--<img src="/static/img/av4.png" alt="Profile Picture" class="img-circle img-sm">-->
													<!--</div>-->
													<!--<div class="media-body">-->
														<!--<div class="text-nowrap">Lucy sent you a message</div>-->
														<!--<small class="text-muted">30 minutes ago</small>-->
													<!--</div>-->
												<!--</a>-->
											<!--</li>-->
										<!--</ul>-->
									<!--</div>-->
								<!--</div>-->

								<!--&lt;!&ndash;Dropdown footer&ndash;&gt;-->
								<!--<div class="pad-all bord-top">-->
									<!--<a href="#" class="btn-link text-dark box-block">-->
										<!--<i class="fa fa-angle-right fa-lg pull-right"></i>Show All Messages-->
									<!--</a>-->
								<!--</div>-->
							<!--</div>-->
						<!--</li>-->
						<!--&lt;!&ndash;~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~&ndash;&gt;-->
						<!--&lt;!&ndash;End message dropdown&ndash;&gt;-->




						<!--&lt;!&ndash;Notification dropdown&ndash;&gt;-->
						<!--&lt;!&ndash;~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~&ndash;&gt;-->
						<!--<li class="dropdown">-->
							<!--<a href="#" data-toggle="dropdown" class="dropdown-toggle">-->
								<!--<i class="fa fa-bell fa-lg"></i>-->
								<!--<span class="badge badge-header badge-danger">5</span>-->
							<!--</a>-->

							<!--&lt;!&ndash;Notification dropdown menu&ndash;&gt;-->
							<!--<div class="dropdown-menu dropdown-menu-md with-arrow">-->
								<!--<div class="pad-all bord-btm">-->
									<!--<p class="text-lg text-muted text-thin mar-no">You have 3 messages.</p>-->
								<!--</div>-->
								<!--<div class="nano scrollable">-->
									<!--<div class="nano-content">-->
										<!--<ul class="head-list">-->

											<!--&lt;!&ndash; Dropdown list&ndash;&gt;-->
											<!--<li>-->
												<!--<a href="#">-->
													<!--<div class="clearfix">-->
														<!--<p class="pull-left">Progressbar</p>-->
														<!--<p class="pull-right">70%</p>-->
													<!--</div>-->
													<!--<div class="progress progress-sm">-->
														<!--<div style="width: 70%;" class="progress-bar">-->
															<!--<span class="sr-only">70% Complete</span>-->
														<!--</div>-->
													<!--</div>-->
												<!--</a>-->
											<!--</li>-->
									<!---->
											<!--&lt;!&ndash; Dropdown list&ndash;&gt;-->
											<!--<li>-->
												<!--<a href="#" class="media">-->
													<!--<div class="media-left">-->
														<!--<span class="icon-wrap icon-circle bg-primary">-->
															<!--<i class="fa fa-comment fa-lg"></i>-->
														<!--</span>-->
													<!--</div>-->
													<!--<div class="media-body">-->
														<!--<div class="text-nowrap">Circle Icon</div>-->
														<!--<small class="text-muted">15 minutes ago</small>-->
													<!--</div>-->
												<!--</a>-->
											<!--</li>-->
									<!---->
											<!--&lt;!&ndash; Dropdown list&ndash;&gt;-->
											<!--<li>-->
												<!--<a href="#" class="media">-->
											<!--<span class="badge badge-success pull-right">90%</span>-->
													<!--<div class="media-left">-->
														<!--<span class="icon-wrap icon-circle bg-danger">-->
															<!--<i class="fa fa-hdd-o fa-lg"></i>-->
														<!--</span>-->
													<!--</div>-->
													<!--<div class="media-body">-->
														<!--<div class="text-nowrap">Circle icon with badge</div>-->
														<!--<small class="text-muted">50 minutes ago</small>-->
													<!--</div>-->
												<!--</a>-->
											<!--</li>-->
									<!---->
											<!--&lt;!&ndash; Dropdown list&ndash;&gt;-->
											<!--<li>-->
												<!--<a href="#" class="media">-->
													<!--<div class="media-left">-->
														<!--<span class="icon-wrap bg-info">-->
															<!--<i class="fa fa-file-word-o fa-lg"></i>-->
														<!--</span>-->
													<!--</div>-->
													<!--<div class="media-body">-->
														<!--<div class="text-nowrap">Square Icon</div>-->
														<!--<small class="text-muted">Last Update 8 hours ago</small>-->
													<!--</div>-->
												<!--</a>-->
											<!--</li>-->
									<!---->
											<!--&lt;!&ndash; Dropdown list&ndash;&gt;-->
											<!--<li>-->
												<!--<a href="#" class="media">-->
											<!--<span class="label label-danger pull-right">New</span>-->
													<!--<div class="media-left">-->
														<!--<span class="icon-wrap bg-purple">-->
															<!--<i class="fa fa-comment fa-lg"></i>-->
														<!--</span>-->
													<!--</div>-->
													<!--<div class="media-body">-->
														<!--<div class="text-nowrap">Square icon with label</div>-->
														<!--<small class="text-muted">Last Update 8 hours ago</small>-->
													<!--</div>-->
												<!--</a>-->
											<!--</li>-->
										<!--</ul>-->
									<!--</div>-->
								<!--</div>-->

								<!--&lt;!&ndash;Dropdown footer&ndash;&gt;-->
								<!--<div class="pad-all bord-top">-->
									<!--<a href="#" class="btn-link text-dark box-block">-->
										<!--<i class="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications-->
									<!--</a>-->
								<!--</div>-->
							<!--</div>-->
						<!--</li>-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End notifications dropdown-->



						<!--Mega dropdown-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--<li class="mega-dropdown">-->
							<!--<a href="#" class="mega-dropdown-toggle">-->
								<!--<i class="fa fa-th-large fa-lg"></i>-->
							<!--</a>-->
							<!--<div class="dropdown-menu mega-dropdown-menu">-->
								<!--<div class="clearfix">-->
									<!--<div class="col-sm-12 col-md-3">-->

										<!--&lt;!&ndash;Mega menu widget&ndash;&gt;-->
										<!--<div class="text-center bg-purple pad-all">-->
											<!--<h3 class="text-thin mar-no">Weekend shopping</h3>-->
											<!--<div class="pad-ver box-inline">-->
												<!--<span class="icon-wrap icon-wrap-lg icon-circle bg-trans-light">-->
													<!--<i class="fa fa-shopping-cart fa-4x"></i>-->
												<!--</span>-->
											<!--</div>-->
											<!--<p class="pad-btm">-->
												<!--Members get <span class="text-lg text-bold">50%</span> more points. Lorem ipsum dolor sit amet!-->
											<!--</p>-->
											<!--<a href="#" class="btn btn-purple">Learn More...</a>-->
										<!--</div>-->

									<!--</div>-->
									<!--<div class="col-sm-4 col-md-3">-->

										<!--&lt;!&ndash;Mega menu list&ndash;&gt;-->
										<!--<ul class="list-unstyled">-->
											<!--<li class="dropdown-header">Pages</li>-->
											<!--<li><a href="#">Profile</a></li>-->
											<!--<li><a href="#">Search Result</a></li>-->
											<!--<li><a href="#">FAQ</a></li>-->
											<!--<li><a href="#">Sreen Lock</a></li>-->
											<!--<li><a href="#" class="disabled">Disabled</a></li>-->
											<!--<li class="divider"></li>-->
											<!--<li class="dropdown-header">Icons</li>-->
											<!--<li><a href="#"><span class="pull-right badge badge-purple">479</span> Font Awesome</a></li>-->
											<!--<li><a href="#">Skycons</a></li>-->
										<!--</ul>-->

									<!--</div>-->
									<!--<div class="col-sm-4 col-md-3">-->

										<!--&lt;!&ndash;Mega menu list&ndash;&gt;-->
										<!--<ul class="list-unstyled">-->
											<!--<li class="dropdown-header">Mailbox</li>-->
											<!--<li><a href="#"><span class="pull-right label label-danger">Hot</span>Indox</a></li>-->
											<!--<li><a href="#">Read Message</a></li>-->
											<!--<li><a href="#">Compose</a></li>-->
											<!--<li class="divider"></li>-->
											<!--<li class="dropdown-header">Featured</li>-->
											<!--<li><a href="#">Smart navigation</a></li>-->
											<!--<li><a href="#"><span class="pull-right badge badge-success">6</span>Exclusive plugins</a></li>-->
											<!--<li><a href="#">Lot of themes</a></li>-->
											<!--<li><a href="#">Transition effects</a></li>-->
										<!--</ul>-->

									<!--</div>-->
									<!--<div class="col-sm-4 col-md-3">-->

										<!--&lt;!&ndash;Mega menu list&ndash;&gt;-->
										<!--<ul class="list-unstyled">-->
											<!--<li class="dropdown-header">Components</li>-->
											<!--<li><a href="#">Tables</a></li>-->
											<!--<li><a href="#">Charts</a></li>-->
											<!--<li><a href="#">Forms</a></li>-->
											<!--<li class="divider"></li>-->
											<!--<li>-->
												<!--<form role="form" class="form">-->
													<!--<div class="form-group">-->
														<!--<label class="dropdown-header" for="demo-megamenu-input">Newsletter</label>-->
														<!--<input id="demo-megamenu-input" type="email" placeholder="Enter email" class="form-control">-->
													<!--</div>-->
													<!--<button class="btn btn-primary btn-block" type="submit">Submit</button>-->
												<!--</form>-->
											<!--</li>-->
										<!--</ul>-->
									<!--</div>-->
								<!--</div>-->
							<!--</div>-->
						<!--</li>-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End mega dropdown-->

					</ul>
					<ul class="nav navbar-top-links pull-right">

						<!--Language selector-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--<li class="dropdown">-->
							<!--<a class="lang-selector dropdown-toggle" href="#" data-toggle="dropdown">-->
								<!--<span class="lang-selected">-->
									<!--<img class="lang-flag" src="/static/img/flags/united-kingdom.png" alt="English">-->
									<!--<span class="lang-id">EN</span>-->
									<!--<span class="lang-name">English</span>-->
								<!--</span>-->
							<!--</a>-->

							<!--&lt;!&ndash;Language selector menu&ndash;&gt;-->
							<!--<ul class="head-list dropdown-menu with-arrow">-->
								<!--<li>-->
									<!--&lt;!&ndash;English&ndash;&gt;-->
									<!--<a href="#" class="active">-->
										<!--<img class="lang-flag" src="/static/img/flags/united-kingdom.png" alt="English">-->
										<!--<span class="lang-id">EN</span>-->
										<!--<span class="lang-name">English</span>-->
									<!--</a>-->
								<!--</li>-->
								<!--<li>-->
									<!--&lt;!&ndash;France&ndash;&gt;-->
									<!--<a href="#">-->
										<!--<img class="lang-flag" src="/static/img/flags/france.png" alt="France">-->
										<!--<span class="lang-id">FR</span>-->
										<!--<span class="lang-name">Fran&ccedil;ais</span>-->
									<!--</a>-->
								<!--</li>-->
								<!--<li>-->
									<!--&lt;!&ndash;Germany&ndash;&gt;-->
									<!--<a href="#">-->
										<!--<img class="lang-flag" src="/static/img/flags/germany.png" alt="Germany">-->
										<!--<span class="lang-id">DE</span>-->
										<!--<span class="lang-name">Deutsch</span>-->
									<!--</a>-->
								<!--</li>-->
								<!--<li>-->
									<!--&lt;!&ndash;Italy&ndash;&gt;-->
									<!--<a href="#">-->
										<!--<img class="lang-flag" src="/static/img/flags/italy.png" alt="Italy">-->
										<!--<span class="lang-id">IT</span>-->
										<!--<span class="lang-name">Italiano</span>-->
									<!--</a>-->
								<!--</li>-->
								<!--<li>-->
									<!--&lt;!&ndash;Spain&ndash;&gt;-->
									<!--<a href="#">-->
										<!--<img class="lang-flag" src="/static/img/flags/spain.png" alt="Spain">-->
										<!--<span class="lang-id">ES</span>-->
										<!--<span class="lang-name">Espa&ntilde;ol</span>-->
									<!--</a>-->
								<!--</li>-->
							<!--</ul>-->
						<!--</li>-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End language selector-->



						<!--User dropdown-->
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<li id="dropdown-user" class="dropdown">
							<a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
								<span class="pull-right">
									<img class="img-circle img-user media-object" src="/static/img/av1.png" alt="Profile Picture">
								</span>
								<div class="username hidden-xs">{{ request.user.name }}</div>
							</a>


							<div class="dropdown-menu dropdown-menu-md dropdown-menu-right with-arrow panel-default">

								<!-- Dropdown heading  -->
								<!--<div class="pad-all bord-btm">-->
									<!--<p class="text-lg text-muted text-thin mar-btm">750Gb of 1,000Gb Used</p>-->
									<!--<div class="progress progress-sm">-->
										<!--<div class="progress-bar" style="width: 70%;">-->
											<!--<span class="sr-only">70%</span>-->
										<!--</div>-->
									<!--</div>-->
								<!--</div>-->


								<!-- User dropdown menu -->
								<!--<ul class="head-list">-->
									<!--<li>-->
										<!--<a href="#">-->
											<!--<i class="fa fa-user fa-fw fa-lg"></i> Profile-->
										<!--</a>-->
									<!--</li>-->
									<!--<li>-->
										<!--<a href="#">-->
											<!--<span class="badge badge-danger pull-right">9</span>-->
											<!--<i class="fa fa-envelope fa-fw fa-lg"></i> Messages-->
										<!--</a>-->
									<!--</li>-->
									<!--<li>-->
										<!--<a href="#">-->
											<!--<span class="label label-success pull-right">New</span>-->
											<!--<i class="fa fa-gear fa-fw fa-lg"></i> Settings-->
										<!--</a>-->
									<!--</li>-->
								<!--</ul>-->

								<!-- Dropdown footer -->
								<div class="pad-all text-right">
									<a href="/logout/" class="btn btn-primary">
										<i class="fa fa-sign-out fa-fw"></i> Logout
									</a>
								</div>
							</div>
						</li>
						<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
						<!--End user dropdown-->

					</ul>
				</div>
				<!--================================-->
				<!--End Navbar Dropdown-->

			</div>
		</header>
		<!--===================================================-->
		<!--END NAVBAR-->

		<div class="boxed">

			<!--CONTENT CONTAINER-->
			<!--===================================================-->
			<div id="content-container">
				
				<!--Page Title-->
				<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
				<div id="page-title">
					<h1 class="page-header text-overflow">{% block page-content-title %}Your page title{% endblock %}</h1>

					<!--Searchbox-->
					<!--<div class="searchbox">-->
						<!--<div class="input-group custom-search-form">-->
							<!--<input type="text" class="form-control" placeholder="Search..">-->
							<!--<span class="input-group-btn">-->
								<!--<button class="text-muted" type="button"><i class="fa fa-search"></i></button>-->
							<!--</span>-->
						<!--</div>-->
					<!--</div>-->
				</div>
				<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
				<!--End page title-->


				<!--Breadcrumb-->
                {% block page-nav-tab %}
				<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
				<ol class="breadcrumb">
					<li><a href="/">Home</a></li>
					<li><a href="#">Library</a></li>
					<li class="active">Data</li>
				</ol>
				<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
				<!--End breadcrumb-->
                {% endblock %}

		

				<!--Page content-->
				<!--===================================================-->
				<div id="page-content">
					 {% block page-content %}
					
					<!-- QUICK TIPS -->
					<!-- ==================================================================== -->
					<!--<h3>Your content here...</h3>-->
					<!--<br>-->
					<!--<a href="index.html" class="btn btn-dark">Back</a>-->
					<!--<br><br><br>-->
					<!--<h3>Quick Tips</h3>-->
					<!--<p>You may remove all ID or Class names which contain <code>demo-</code>, they are only used for demonstration.</p>-->
					<!--<br>-->
					<!---->
					<!--<h4>Navigation</h4>-->
					<!--<div class="table-responsive">-->
						<!--<table class="table">-->
							<!--<tbody>-->
								<!--<tr>-->
									<!--<td style="width:70ex">Expanded the navigation by default</td>-->
									<!--<td>Add <code>.mainnav-lg</code> to the <code>#container</code>.</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>Fixed navigation</td>-->
									<!--<td>Add <code>.mainnav-fixed</code> to the <code>#container</code>.</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>Create a ToggleButton for navigation</td>-->
									<!--<td>Add <code>.mainnav-toggle</code> to the button.</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td></td>-->
									<!--<td>-->
										<!--<button class="btn btn-lg btn-primary mainnav-toggle">Toggle Navigation</button>-->
									<!--</td>-->
								<!--</tr>-->
							<!--</tbody>-->
						<!--</table>-->
					<!--</div>-->
					<!---->
					<!--<h4>Aside</h4>-->
					<!--<div class="table-responsive">-->
						<!--<table class="table">-->
							<!--<tbody>-->
								<!--<tr>-->
									<!--<td style="width:70ex">Make Aside visible by default</td>-->
									<!--<td>Add <code>.aside-in</code> to the <code>#container</code>.</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>Fixed aside</td>-->
									<!--<td>Add <code>.aside-fixed</code> to the <code>#container</code>.</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>Aside on the left side</td>-->
									<!--<td>Add <code>.aside-left</code> to the <code>#container</code>.</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>Use the bright color theme</td>-->
									<!--<td>Add <code>.aside-bright</code> to the <code>#container</code>.</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>Create a ToggleButton for aside</td>-->
									<!--<td>Add <code>.aside-toggle</code> to the button.</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td></td>-->
									<!--<td>-->
										<!--<button class="btn btn-success btn-lg aside-toggle">Toggle Aside</button>-->
									<!--</td>-->
								<!--</tr>-->
							<!--</tbody>-->
						<!--</table>-->
					<!--</div>-->
					<!--<h4>Navbar</h4>-->
					<!--<div class="table-responsive">-->
						<!--<table class="table">-->
							<!--<tbody>-->
								<!--<tr>-->
									<!--<td style="width:70ex">Fixed navbar</td>-->
									<!--<td>Add <code>.navbar-fixed</code> to the <code>#container</code>.</td>-->
								<!--</tr>-->
							<!--</tbody>-->
						<!--</table>-->
					<!--</div>-->
					<!--<h4>Footer</h4>-->
					<!--<div class="table-responsive">-->
						<!--<table class="table">-->
							<!--<tbody>-->
								<!--<tr>-->
									<!--<td style="width:70ex">Fixed footer</td>-->
									<!--<td>Add <code>.footer-fixed</code> to the <code>#container</code>.</td>-->
								<!--</tr>-->
							<!--</tbody>-->
						<!--</table>-->
					<!--</div>-->
					<!--<h4>Color Themes</h4>-->
					<!--<div class="table-responsive">-->
						<!--<table class="table">-->
							<!--<tbody>-->
								<!--<tr>-->
									<!--<td style="width:70ex">Apply a different color theme</td>-->
									<!--<td>You can change whole color theme of your website by adding a color theme stylesheet into the <code>&lt;head></code>.</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td></td>-->
									<!--<td><pre>&lt;head><br>	...<br>	&lt;link href="path-to-the-color-theme.css" rel="stylesheet"><br>&lt;/head></pre></td>-->
								<!--</tr>-->
							<!--</tbody>-->
						<!--</table>-->
					<!--</div>-->
					<!--<h4>Animation</h4>-->
					<!--<div class="table-responsive">-->
						<!--<table class="table">-->
							<!--<tbody>-->
								<!--<tr>-->
									<!--<td style="width:70ex">Remove animation</td>-->
									<!--<td>Remove the class <code>.effect</code> from <code>#container</code>.</td>-->
								<!--</tr>-->
								<!--<tr>-->
									<!--<td>Add different slide transitions to the Navigation and Aside</td>-->
									<!--<td>-->
										<!--Add <code>.effect</code> to the <code>#container</code> and then combined with the class name of the transition function.-->
										<!--<br>-->
										<!--<br>-->
										<!--<table>-->
											<!--<thead>-->
												<!--<tr>-->
													<!--<th style="width: 250px;">Transition function</th>-->
													<!--<th>Class name</th>-->
												<!--</tr>-->
											<!--</thead>-->
											<!--<tbody>-->
												<!--<tr>-->
													<!--<td>easeInQuart</td>-->
													<!--<td><code>.easeInQuart</code></td>-->
												<!--</tr>-->
												<!--<tr>-->
													<!--<td>easeOutQuart</td>-->
													<!--<td><code>.easeOutQuart</code></td>-->
												<!--</tr>-->
												<!--<tr>-->
													<!--<td>easeInBack</td>-->
													<!--<td><code>.easeInBack</code></td>-->
												<!--</tr>-->
												<!--<tr>-->
													<!--<td>easeOutBack</td>-->
													<!--<td><code>.easeOutBack</code></td>-->
												<!--</tr>-->
												<!--<tr>-->
													<!--<td>easeInOutBack</td>-->
													<!--<td><code>.easeInOutBack</code></td>-->
												<!--</tr>-->
												<!--<tr>-->
													<!--<td>steps</td>-->
													<!--<td><code>.steps</code></td>-->
												<!--</tr>-->
												<!--<tr>-->
													<!--<td>jumping</td>-->
													<!--<td><code>.jumping</code></td>-->
												<!--</tr>-->
												<!--<tr>-->
													<!--<td>rubber</td>-->
													<!--<td><code>.rubber</code></td>-->
												<!--</tr>-->
											<!--</tbody>-->
										<!--</table>-->
									<!--</td>-->
								<!--</tr>-->
							<!--</tbody>-->
						<!--</table>-->
					<!--</div>-->
					<!--&lt;!&ndash; ==================================================================== &ndash;&gt;-->
					<!--&lt;!&ndash; END QUICK TIPS &ndash;&gt;-->
					<!---->
					<!---->
					{% endblock %}
				</div>
				<!--===================================================-->
				<!--End page content-->


			</div>
			<!--===================================================-->
			<!--END CONTENT CONTAINER-->


			
			<!--MAIN NAVIGATION-->
			<!--===================================================-->
			<nav id="mainnav-container">
				<div id="mainnav">

					<!--Shortcut buttons-->
					<!--================================-->
					<!--<div id="mainnav-shortcut">-->
						<!--<ul class="list-unstyled">-->
							<!--<li class="col-xs-4" data-content="Shortcut 1">-->
								<!--<a class="shortcut-grid" href="#">-->
									<!--<i class="fa fa-car"></i>-->
								<!--</a>-->
							<!--</li>-->
							<!--<li class="col-xs-4" data-content="Shortcut 2">-->
								<!--<a class="shortcut-grid" href="#">-->
									<!--<i class="fa fa-taxi"></i>-->
								<!--</a>-->
							<!--</li>-->
							<!--<li class="col-xs-4" data-content="Shortcut 3">-->
								<!--<a class="shortcut-grid" href="#">-->
									<!--<i class="fa fa-bus"></i>-->
								<!--</a>-->
							<!--</li>-->
						<!--</ul>-->
					<!--</div>-->
					<!--================================-->
					<!--End shortcut buttons-->


					<!--Menu-->
					<!--================================-->
					<div id="mainnav-menu-wrap">
						<div class="nano">
							<div class="nano-content">
								<ul id="mainnav-menu" class="list-group">
						
									<!--Category name-->
									<li class="list-header">菜单</li>
						
									<!--Menu list item-->
									<li class="">
										<a href="/">
											<i class="fa fa-home"></i>
											<span class="menu-title">图表页</span>
										</a>
									</li>
						
									<!--Menu list item-->
									<li>
										<a href="#">
											<i class="fa fa-tag"></i>
											<span class="menu-title">
												资产查看
											</span>
										</a>
                                        <ul class="collapse">
											<li><a href="{% url 'asset_list' %}">资产列表</a></li>
											<li class=""><a href="{% url 'asset_category' %}">分类视图</a></li>
											<li class=""><a href="{% url 'asset_Cabinet' %}">机柜视图</a></li>
											<!--<li><a href="#">Another link</a></li>-->


										</ul>

									</li>
						
									<!--Menu list item-->
									<!--<li>-->
										<!--<a href="#">-->
											<!--<i class="fa fa-tag"></i>-->
											<!--<span class="menu-title">-->
												<!--With label-->
												<!--<span class="label label-success pull-right">New</span>-->
											<!--</span>-->
										<!--</a>-->
									<!--</li>-->
						<!---->
									<!--&lt;!&ndash;Menu list item&ndash;&gt;-->
									<!--<li>-->
										<!--<a href="#">-->
											<!--<i class="fa fa-rocket"></i>-->
											<!--<span class="menu-title">-->
												<!--With badge-->
												<!--<span class="pull-right badge badge-purple">7</span>-->
											<!--</span>-->
										<!--</a>-->
									<!--</li>-->
						<!---->
									<!--<li class="list-divider"></li>-->
						<!---->
									<!--&lt;!&ndash;Category name&ndash;&gt;-->
									<!--<li class="list-header">Submenus</li>-->
						<!---->
									<!--&lt;!&ndash;Menu list item&ndash;&gt;-->
									<!--<li class="active-sub">-->
										<!--<a href="#">-->
											<!--<i class="fa fa-th"></i>-->
											<!--<span class="menu-title">Active State</span>-->
											<!--<i class="arrow"></i>-->
										<!--</a>-->
						<!---->
										<!--&lt;!&ndash;Submenu&ndash;&gt;-->
										<!--<ul class="collapse in">-->
											<!--<li><a href="#">Link</a></li>-->
											<!--<li class="active-link"><a href="#">Active link</a></li>-->
											<!--<li><a href="#">Another link</a></li>-->
											<!--<li><a href="#">Some else here</a></li>-->
											<!--<li class="list-divider"></li>-->
											<!--<li><a href="#">Separate link</a></li>-->
											<!---->
										<!--</ul>-->
									<!--</li>-->
						<!---->
									<!--&lt;!&ndash;Menu list item&ndash;&gt;-->
									<!--<li>-->
										<!--<a href="#">-->
											<!--<i class="fa fa-taxi"></i>-->
											<!--<span class="menu-title">-->
												<!--<strong>Bolder</strong>-->
											<!--</span>-->
											<!--<i class="arrow"></i>-->
										<!--</a>-->
						<!---->
										<!--&lt;!&ndash;Submenu&ndash;&gt;-->
										<!--<ul class="collapse">-->
											<!--<li><a href="#">Link</a></li>-->
											<!--<li><a href="#">Another link</a></li>-->
											<!--<li><a href="#">Some else here</a></li>-->
											<!--<li class="list-divider"></li>-->
											<!--<li><a href="#">Separate link</a></li>-->
											<!---->
										<!--</ul>-->
									<!--</li>-->
						
									<!--Menu list item-->
									<!--<li>-->
										<!--<a href="#">-->
											<!--<i class="fa fa-road"></i>-->
											<!--<span class="menu-title">-->
												<!--With label-->
												<!--<span class="label label-danger pull-right">Hot</span>-->
											<!--</span>-->
										<!--</a>-->
						<!---->
										<!--&lt;!&ndash;Submenu&ndash;&gt;-->
										<!--<ul class="collapse">-->
											<!--<li><a href="#">Link</a></li>-->
											<!--<li><a href="#">Another link</a></li>-->
											<!--<li><a href="#">Some else here</a></li>-->
											<!--<li class="list-divider"></li>-->
											<!--<li><a href="#">Separate link</a></li>-->
											<!---->
										<!--</ul>-->
									<!--</li>-->
						<!---->
									<!--&lt;!&ndash;Menu list item&ndash;&gt;-->
									<!--<li>-->
										<!--<a href="#">-->
											<!--<i class="fa fa-plug"></i>-->
											<!--<span class="menu-title">-->
												<!--With badge-->
												<!--<span class="pull-right badge badge-success">3</span>-->
											<!--</span>-->
										<!--</a>-->
						<!---->
										<!--&lt;!&ndash;Submenu&ndash;&gt;-->
										<!--<ul class="collapse">-->
											<!--<li><a href="#">Link</a></li>-->
											<!--<li><a href="#">Another link</a></li>-->
											<!--<li><a href="#">Some else here</a></li>-->
											<!--<li class="list-divider"></li>-->
											<!--<li><a href="#">Separate link</a></li>-->
											<!---->
										<!--</ul>-->
									<!--</li>-->
						<!---->
									<!--<li class="list-divider"></li>-->
						<!---->
									<!--&lt;!&ndash;Category name&ndash;&gt;-->
									<!--<li class="list-header">Multi level</li>-->

									<!--&lt;!&ndash;Menu list item&ndash;&gt;-->
									<!--<li>-->
										<!--<a href="#">-->
											<!--<i class="fa fa-plus-square"></i>-->
											<!--<span class="menu-title">Menu Level</span>-->
											<!--<i class="fa arrow"></i>-->
										<!--</a>-->

										<!--&lt;!&ndash;Submenu&ndash;&gt;-->
										<!--<ul class="collapse">-->
											<!--<li><a href="#">Second Level Item</a></li>-->
											<!--<li><a href="#">Second Level Item</a></li>-->
											<!--<li><a href="#">Second Level Item</a></li>-->
											<!--<li class="list-divider"></li>-->
											<!--<li>-->
												<!--<a href="#">Third Level<i class="arrow"></i></a>-->

												<!--&lt;!&ndash;Submenu&ndash;&gt;-->
												<!--<ul class="collapse">-->
													<!--<li><a href="#">Third Level Item</a></li>-->
													<!--<li><a href="#">Third Level Item</a></li>-->
													<!--<li><a href="#">Third Level Item</a></li>-->
													<!--<li><a href="#">Third Level Item</a></li>-->
												<!--</ul>-->
											<!--</li>-->
											<!--<li>-->
												<!--<a href="#">Third Level<i class="arrow"></i></a>-->

												<!--&lt;!&ndash;Submenu&ndash;&gt;-->
												<!--<ul class="collapse">-->
													<!--<li><a href="#">Third Level Item</a></li>-->
													<!--<li><a href="#">Third Level Item</a></li>-->
													<!--<li><a href="#">Third Level Item</a></li>-->
													<!--<li class="list-divider"></li>-->
													<!--<li><a href="#">Third Level Item</a></li>-->
													<!--<li><a href="#">Third Level Item</a></li>-->
												<!--</ul>-->
											<!--</li>-->
										<!--</ul>-->
									<!--</li>-->

								</ul>


								<!--Widget-->
								<!--================================-->
								<!--<div class="mainnav-widget">-->

									<!--&lt;!&ndash; Show the button on collapsed navigation &ndash;&gt;-->
									<!--<div class="show-small">-->
										<!--<a href="#" data-toggle="menu-widget" data-target="#demo-wg-server">-->
											<!--<i class="fa fa-desktop"></i>-->
										<!--</a>-->
									<!--</div>-->

									<!--&lt;!&ndash; Hide the content on collapsed navigation &ndash;&gt;-->
									<!--<div id="demo-wg-server" class="hide-small mainnav-widget-content">-->
										<!--<ul class="list-group">-->
											<!--<li class="list-header pad-no pad-ver">Widget on Navigation Menu</li>-->
											<!--<li class="mar-btm">-->
												<!--<span class="label label-primary pull-right">15%</span>-->
												<!--<p>CPU Usage</p>-->
												<!--<div class="progress progress-sm">-->
													<!--<div class="progress-bar progress-bar-primary" style="width: 15%;">-->
														<!--<span class="sr-only">15%</span>-->
													<!--</div>-->
												<!--</div>-->
											<!--</li>-->
											<!--<li class="mar-btm">-->
												<!--<span class="label label-purple pull-right">75%</span>-->
												<!--<p>Bandwidth</p>-->
												<!--<div class="progress progress-sm">-->
													<!--<div class="progress-bar progress-bar-purple" style="width: 75%;">-->
														<!--<span class="sr-only">75%</span>-->
													<!--</div>-->
												<!--</div>-->
											<!--</li>-->
											<!--<li class="pad-ver"><a href="#" class="btn btn-success btn-bock">View Details</a></li>-->
										<!--</ul>-->
									<!--</div>-->
								<!--</div>-->
								<!--================================-->
								<!--End widget-->

							</div>
						</div>
					</div>
					<!--================================-->
					<!--End menu-->

				</div>
			</nav>
			<!--===================================================-->
			<!--END MAIN NAVIGATION-->
			
			<!--ASIDE-->
			<!--===================================================-->
			<aside id="aside-container">
				<div id="aside">
					<div class="nano">
						<div class="nano-content">
                            {% block aside-content %}
                                put your aside contents here...
                            {% endblock %}
						</div>
					</div>
				</div>
			</aside>
			<!--===================================================-->
			<!--END ASIDE-->

		</div>

		

        <!-- FOOTER -->
        <!--===================================================-->
        <footer id="footer">

            <!-- Visible when footer positions are fixed -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <div class="show-fixed pull-right">
                <ul class="footer-list list-inline">
                    <li>
                        <p class="text-sm">SEO Proggres</p>
                        <div class="progress progress-sm progress-light-base">
                            <div style="width: 80%" class="progress-bar progress-bar-danger"></div>
                        </div>
                    </li>

                    <li>
                        <p class="text-sm">Online Tutorial</p>
                        <div class="progress progress-sm progress-light-base">
                            <div style="width: 80%" class="progress-bar progress-bar-primary"></div>
                        </div>
                    </li>
                    <li>
                        <button class="btn btn-sm btn-dark btn-active-success">Checkout</button>
                    </li>
                </ul>
            </div>



            <!-- Visible when footer positions are static -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <div class="hide-fixed pull-right pad-rgt">Currently v0.0.9</div>



            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

            <p class="pad-lft">&#0169; 2016 xbman-cmdb</p>



        </footer>
        <!--===================================================-->
        <!-- END FOOTER -->


        <!-- SCROLL TOP BUTTON -->
        <!--===================================================-->
        <button id="scroll-top" class="btn"><i class="fa fa-chevron-up"></i></button>
        <!--===================================================-->


    {% endblock %}
	</div>
	<!--===================================================-->
	<!-- END OF CONTAINER -->


	

	<!--JAVASCRIPT-->
	<!--=================================================-->

	<!--jQuery [ REQUIRED ]-->
	<script src="/static/js/jquery-2.1.1.min.js"></script>


	<!--BootstrapJS [ RECOMMENDED ]-->
	<script src="/static/js/bootstrap.min.js"></script>


	<!--Fast Click [ OPTIONAL ]-->
	<script src="/static/js/fastclick.min.js"></script>

	<script src="/static/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

	<!--Nifty Admin [ RECOMMENDED ]-->
	<script src="/static/js/nifty.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){

            var active_node = $("#mainnav-menu a[href='{{ request.path }}']");
            active_node.parent().addClass("active-link");
            if (active_node.parent().parent().hasClass("collapse")){
                active_node.parent().parent().addClass("in");
            }

        });//end doc ready

    </script>

    {% block  bottom-js %}
    {% endblock %}

</body>
</html>
